<template>
  <div class="up-box">
    <el-upload
      class="upload-demo"
      :action="'/intelligent_control_webservice_yb/pc/upload/uploadFileReturnData/'"
      :on-preview="handlePreview"
      multiple
      drag
      :on-remove="handleRemove"
      :file-list="fileList"
      :headers="headers"
      name="file"
      list-type="text"
      :on-success="upSuccess"
      :before-upload="beforeUploadBanner"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传PDF文件，且不超过100M</div>
    </el-upload>
  </div>
</template>
<script>
export default {
  props: {
    fileList: { type: Array },
  },
  computed: {
    headers() {
      return {
        Authorization: window.localStorage.getItem("token"),
      };
    },
  },
  data() {
    return {
      file: {},
    };
  },
  methods: {
    // 上传前
    beforeUploadBanner(file) {
      const isFile = ["application/pdf"].indexOf(file.type) != -1;
      const isLt2M = file.size / 1024 / 1024 < 100;

      if (!isFile) {
        this.$message.error("上传文件只能是PDF格式!");
        return false;
      }

      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过100MB!");
        return false;
      }

      return isFile && isLt2M;
    },
    // 上传成功
    upSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "success",
        });
        file.title = file.name.replace(".pdf", "").replace(".PDF", "");
        file.fileUrl = res.data.url;
        file.fileFormat = ".pdf";
        file.fileNum = res.data.num;
        this.$emit("setPdf", fileList);
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 删除
    handleRemove(file, fileList) {
      this.$emit("setPdf", fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="less" scoped>
.up-box {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  .up-prompt {
    margin-left: 30px;
    color: red;
  }
}
.avatar-uploader {
  width: 100px;
  height: 40px;
  border: solid 1px #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}
.avatar-uploader-icon {
  width: 100%;
  display: block;
  font-size: 20px;
  padding: 5px;
}
.File-avatar {
  width: 280px;
  height: 130px;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upIcon {
  color: #999;
  font-size: 50px;
}
</style>